<template>
  <div style="font-family: 微软雅黑" id="new">
    <table>
      <tr v-for="(topic, index) in topicList" :key="index">
        <td style="width: 35px; font-style: italic" align="center">
          {{ index + 1 }}
        </td>
        <td>
          <div style="width: 600px">
            <div
              style="
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 400px;
                float: left;
              "
            >
              <router-link
                :to="{ path: '/Home/Specific', query: { type: topic.type } }"
                style="font-size: 14px"
                >{{
                  topic.type == 0
                    ? "日常"
                    : topic.type == 1
                    ? "知识"
                    : topic.type == 2
                    ? "提问"
                    : topic.type == 3
                    ? "求助"
                    : "交友"
                }}</router-link
              >
              ||&nbsp;
              <router-link
                :to="{
                  path: '/Home/Topic',
                  query: { data: topic.tId },
                }"
                >{{ topic.title }}</router-link
              >
            </div>
            <div
              style="
                float: left;
                font-size: 12px;
                color: #4c9ed9;
                line-height: 20px;
              "
            >
              &nbsp;&nbsp;[点赞:{{ topic.likes }}]&nbsp;[收藏:{{
                topic.collectionTimes
              }}]&nbsp;
            </div>
          </div>
        </td>
        <td align="right" width="80px;">
          <div
            style="
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 80px;
            "
          >
            <a
              class="topicTitle"
              href="#"
              target="_top"
              style="font-size: 14px"
              >{{ topic.nickname }}</a
            >
            &nbsp;&nbsp;
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import $ from "jquery";
import axios from "axios";
export default {
  data() {
    return {
      topicList: [],
    };
  },
  methods: {
    getHotData() {
      var _this = this;
      $.ajax({
        type: "get",
        url: "http://localhost:8080/forum/index/nicelist",
        dataType: "json",
        success: function (response) {
          // console.log("nicelist", response);
          _this.topicList = response;
        },
      });
    },
  },
  mounted() {
    this.getHotData();
  },
};
</script>

<style scoped>
table td {
  height: 30px;
  font-size: 16px;
}

a:link,
a:visited {
  color: #525252;
  text-decoration: none;
}

/* 未被访问的链接 */ /*已被访问的链接 */
a:hover {
  color: #525252;
  text-decoration: underline;
}

/* 鼠标指针移动到链接上 */
.topicTitle:link,
.topicTitle:visited {
  color: #525252;
  text-decoration: none;
}

.topicTitle:hover {
  color: #2c86e5;
  text-decoration: underline;
}
</style>